Design principles for this UI review
These principles are the lens for recommendations, aiming for clean, subtle, fresh, and modern fashion ecommerce.
1) Clarity and hierarchy
Make the primary actions and key messages obvious with minimal visual noise.
- What good looks like: One clear hero message, one primary CTA style, consistent heading hierarchy.
- Watch outs: Competing banners, mixed button styles, low-contrast text on imagery.
2) Consistency and systemisation
Fewer component styles, more repeatable patterns, tighter spacing and typography rules.
- What good looks like: Reusable card layouts, standardised padding, predictable icon sizes.
- Watch outs: Slightly different fonts, radii, shadows, or borders across modules.
3) Premium restraint
Let photography and whitespace carry the brand, keep UI chrome minimal.
- What good looks like: Muted neutrals, subtle dividers, restrained promotions.
- Watch outs: Heavy outlines, loud badges, chunky shadows, overly saturated accents.
4) Modern interaction cues
Clear states for hover, focus, selected, disabled, and loading, without gimmicks.
- What good looks like: Soft transitions, clear active states, accessible focus rings.
- Watch outs: No selected indication, inconsistent hover treatments, unclear tappable targets.
5) Content and typography polish
Better legibility, calmer rhythm, and more editorial type use where it counts.
- What good looks like: Balanced line-lengths, consistent casing, deliberate type pairing.
- Watch outs: Thin type on images, excessive all-caps, inconsistent spacing between modules.
How this report is structured
Each page tab contains “findings”. Each finding has pros, cons, recommended change, and an image slot.
- Device: Desktop and mobile tags per finding.
- Images: Upload any screenshot and it previews inline (local only).
- Next: We will add Global, PLP, PDP, and Mini cart tabs.
Homepage (UAT)
Add findings for homepage UI elements only. Each item should be specific and include desktop or mobile.
Hero typography legibility and CTA refinement
Desktop Mobile- Hero imagery feels editorial and on-brand for fashion.
- Primary CTA is clear and prominent.
- Text legibility varies depending on image brightness and contrast.
- CTA styling reads slightly generic and could be more boutique.
- On mobile, headline scale can crowd the composition.
Image slot: upload your UAT screenshot for this finding.
Tip: capture hero on desktop and mobile, plus any alternate hero slides.
Category tiles hierarchy and mobile carousel treatment
Desktop Mobile- Quick pathways into key categories.
- Photography communicates use-case well.
- Tiles lack excitement. CTA's have no unique styling
- Mobile carousel images can camouflage arrows.
- Inconsistent spacing and padding around component
Image slot: upload your UAT screenshot for this finding.
Tip: capture the tile module at first view, and after one horizontal swipe on mobile.
Product grid, card density, and Quick Add pattern
Desktop Mobile- Product imagery is strong and consistent.
- Quick Add supports faster purchasing.
- Tag design legible without interrupting product images
- Quick Add plus size buttons and color adds visual density, most noticeable on mobile.
Image slot: upload your UAT screenshot for this finding.
Tip: capture a product card default state and the Quick Add expanded state.
Long-form brand copy block readability and hierarchy
Desktop Mobile- Brand story and SEO content is present.
- Helpful for first-time visitors who want context.
- Visually heavy for a homepage and lacks ideal styling and formatting.
- Mobile scroll fatigue increases with dense paragraphs.
- Read more control can be missed if not styled clearly.
Image slot: upload your UAT screenshot for this finding.
Tip: capture the collapsed and expanded states of the Read more section.
Reassurance strip icon system and spacing
Desktop Mobile- Strong reassurance coverage at a glance.
- Icons help users scan the benefits.
- Mobile strip is dense and long.
- Icon stlyling all feel completely different
- Spacing and alignment can drift between items.
Image slot: upload your UAT screenshot for this finding.
Tip: capture the reassurance strip on both desktop and mobile, including any hover states.
Global Elements
Global UI review covering navigation and footer patterns across desktop and mobile.
General UI - Global visual styling and hierarchy consistency
Desktop Mobile- Clean and minimal visual presentation across the site.
- Consistent use of components creates a cohesive experience.
- Black and white palette keeps the UI feeling neutral and premium.
- Limited text hierarchy makes headlines, subheadings, and supporting text feel visually similar.
- CTAs often rely on placement rather than styling to stand out.
- Minimal use of brand color reduces visual energy and emphasis.
- Lack of clear typographic scale or style differentiation suggests no defined UI style guide.
- Important moments such as promotions, section headers, and reassurance messaging lack visual contrast.
Image slot: upload your UAT screenshot for this finding.
Tip: name your screenshot consistently (for example: HP-Hero-Mobile.png).
Promo bar and header stack
Desktop Mobile- Strong monochrome base feels clean and fashion-led.
- Always on search box
- Clear separation of global controls (nav, account, cart).
- Multiple stacked rows and promo messages can feel visually busy, especially on mobile.
- Competing promos dilute a premium, editorial tone.
- Header height pushes hero content down, reducing impact.
Image slot: upload your UAT screenshot for this finding.
Tip: screenshot the header at page load and after 1 scroll on mobile.
Navigation density and mega menu scanning
Desktop Mobile- Clear category coverage and strong breadth for discovery.
- Familiar patterns make the navigation learnable.
- Many top-level items compete for attention and reduce the curated feel.
- Long link lists in mega menus are visually similar, scanning becomes work.
- Repeated labels can create perceived redundancy.
Image slot: upload your UAT screenshot for this finding.
Tip: capture desktop nav and the full mobile nav drawer open.
Search entry point and interaction clarity
Desktop Mobile- Search is available globally and easy to find.
- Clear field pattern is familiar.
- If search appears as a full row, it can add height and compete with hero on mobile.
- Autocomplete and suggestion layout can feel busy if too many suggestion types show at once.
- Clear and close controls can be small on mobile.
Image slot: upload your UAT screenshot for this finding.
Tip: capture search closed, open, and with suggestions visible.
PLP (UAT)
Product listing page findings covering filters, grid, quick add, promotions, and sorting.
PLP filtering density and discoverability
Desktop Mobile- Very comprehensive filtering allows users to narrow down highly specific needs.
- Search within results is available and useful for large assortments.
- Clear grouping of filter categories (color, size, length, price, occasion, fabric).
- Filter list is very long and visually heavy, especially on desktop.
Image slot: upload your UAT screenshot for this finding.
Tip: capture filter rail on desktop and filter drawer on mobile.
Sorting and results context
Desktop Mobile- Sorting options cover key user needs (newest, price, rating).
- Default sorting provides a reasonable starting point.
- UI error on mobile when Navigation is open
Image slot: upload your UAT screenshot for this finding.
Tip: capture sort dropdown open state and result count placement.
PDP (UAT)
Product detail page findings covering gallery, pricing, size selection, add to cart, content, and cross sell.
PDP image gallery clarity and interaction
Desktop Mobile- High quality imagery clearly shows fit, fabric, and detailing.
- Multiple angles help reduce uncertainty before purchase.
- Thumbnail navigation is predictable and familiar.
- Gallery size on tablet devices creates odd UI PDP layout with white space
- On mobile, long image stacks increase scroll before reaching product details.
Image slot: upload your UAT screenshot for this finding.
Tip: capture gallery layout on desktop and swipe behaviour on mobile.
Product information hierarchy and scanability
Desktop Mobile- Pricing and discount messaging are clear and prominent.
- Percentage off has strong UI and color
- Brand and product name are easy to identify.
- Low stock messaging adds urgency without being aggressive.
- Multiple price formats and payment options compete for attention.
- Promotional badges can fragment the visual hierarchy.
- Key reassurance details are pushed lower in the layout.
Image slot: upload your UAT screenshot for this finding.
Tip: capture price area with all promotional messaging visible.
Size selection confidence and support
Desktop Mobile- Size options are clearly presented and easy to tap or click.
- Size guide and fit assistance are available inline.
- Low stock indicator supports quicker decision making.
Image slot: upload your UAT screenshot for this finding.
Tip: capture size selector with size guide link and any fit notes visible.
Add to cart visibility and commitment
Desktop Mobile- Add to cart CTA is visually strong and easy to locate.
- CTA language is clear and action oriented.
- Low stock messaging reinforces urgency near the action point.
Image slot: upload your UAT screenshot for this finding.
Tip: capture ATC button area and any sticky behaviour on mobile.
Cross sell and style inspiration placement
Desktop Mobile- Related items feel relevant and visually cohesive.
- Quick add supports easy basket expansion.
- Reinforces styling inspiration.
- Cross sell sections add significant page length.
- Can distract users before primary purchase is complete.
- On mobile, primary product context can be lost.
Image slot: upload your UAT screenshot for this finding.
Tip: capture cross sell carousel and its position relative to ATC.
Mini Cart (UAT)
Mini cart findings covering visibility, product clarity, checkout CTA, promotions, and upsells.
Promotional messaging within mini cart
Desktop Mobile- Incentives and discounts remain visible close to conversion.
- Rewards and promotions reinforce perceived value.
- Critical information but can be easily lost to the eye. Requires user to stop and read
Image slot: upload your UAT screenshot for this finding.
Tip: capture any promotional banners or reward messaging within mini cart.
New finding title
Desktop Mobile- What is working well
- What is creating noise or friction
Image slot: upload your UAT screenshot for this finding.
Tip: name your screenshot consistently (for example: HP-Hero-Mobile.png).